<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding:0;margin:0;}
			div{
				width:100px;
				height:100px;
				/*margin:0 auto;*/
				background: blue;
				/*scale放大倍数*/
				/*transform: scale(0.5);*/
				transition: 1s;
			}
			body{
				height:400px;
				border:1px solid black;
			}
			#div1{
				background: red;
				
			}
			/*body:hover #div1{
				transform: translateX(200px) scale(0.5);
			}
			body:hover #div2{
				transform:scale(0.5) translateX(200px);
			}*/
			#div1{
				background: red;
				transform: translateX(200px) scale(0.5);
			}
			#div2{
				transform: scale(0.5) translateX(200px);
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var oDiv2 = document.getElementById("div2");
				console.log(oDiv1.offsetLeft,oDiv2.offsetLeft);
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>
